<script setup lang="ts">
import { rules } from '../config';
import { openWindow } from '@vc/utils';

import { LINK_AGREEMENT_USER, LINK_AGREEMENT_PRIVACY } from '@/router/constants';
interface Props {
  checked?: boolean;
}

const {
  checked
} = defineProps<Props>();


const emit = defineEmits(['update:checked']);

const initStyle = {
  '--el-checkbox-text-color': '#999999',
  '--el-checkbox-checked-text-color': '#999999',
  '--fill-color': '#02C680'
};
</script>

<template>
  <el-form-item :rules="rules.privacy" prop="checked" class="text-[#999999] ml-73px mb-18px">
    <el-checkbox :style="initStyle" :model-value="checked"
      @change="(value) => emit('update:checked', value)">
      我已阅读并同意
    </el-checkbox>
    <vc-link :underline="false" type="primary" @click="openWindow(LINK_AGREEMENT_USER)" class="text-[#02C680] font-500">
      &nbsp;服务协议&nbsp;
    </vc-link>
    和
    <vc-link :underline="false" type="primary" @click="openWindow(LINK_AGREEMENT_PRIVACY)" class="text-[#02C680] font-500">
      &nbsp;隐私政策
    </vc-link>
  </el-form-item>
</template>

<style lang='scss' scoped>
 :deep(.el-checkbox) {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: var(--fill-color);
    border-color: var(--fill-color);
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner,
  .el-checkbox__inner:hover {
    border-color: #999999;
  }
}

</style>
